import "./Projects.scss"

export interface Project {
  title: string;
  items: Item[];
}
export interface Item {
  name: string;
  desc: string;
  img: string;
}

const Projects = memo(() => {
  const [curIndex, setCurIndex] = useState(0)
  const mockData: Project[] = [
    {
      title: "FontEnd",
      items: [
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img1.png"
        },
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img1.png"
        },
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img1.png"
        },
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img1.png"
        },
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img1.png"
        },
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img1.png"
        },
      ]
    },
    {
      title: "Backstage",
      items: [
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img2.png"
        }
      ]
    },
    {
      title: "Note",
      items: [
        {
          name: "Business Startup",
          desc: "Design & Development",
          img: "/src/assets/img/project-img3.png"
        }
      ]
    },
  ]
  const mockTitle = ["FontEnd", "Backstage", "Note"]
  return (
    <section className="projects-com" id="projects">
      <div className="container">
        <p className="big-title">Projects</p>
        <p className="big-desc">Here are some of my works</p>
        <div className="choose-box">
          {mockTitle.map((title, index) => (
            <p className={curIndex === index ? 'active' : ""} onClick={() => { setCurIndex(index) }} key={index}>{title}</p>
          ))}
        </div>
        <div className="show-box">
          {mockData[curIndex].items.map((v, i) => (
            <div className="show-img" key={i}>
              <img src={v.img} alt="img load error" />
              <div className="mask-box">
                <div className="name">{v.name}</div>
                <div className="desc">{v.desc}</div>
              </div>
            </div>
          ))
          }
        </div>
      </div>
    </section>
  )
})

export default Projects
